<template>
  <div class="start">
    <transition name="start_exam">
      <div class="button center" v-if="startAni" @click="startExam">
        <div class="box">S</div>
        <div class="box">T</div>
        <div class="box">A</div>
        <div class="box">R</div>
        <div class="box">T</div>
      </div>
    </transition>
    <transition name="start_exam">
    <div v-if="!startAni" class="center">
      <a-steps changeable :current="current" >
        <a-step description=" ">选择年级</a-step>
        <a-step description=" ">选择科目</a-step>
        <a-step description=" ">选择难度</a-step>
      </a-steps>
      <div class="steps" >
          <a-select style="margin-bottom: 20px"
          placeholder="Please select ..." :loading="loading" :options="optionList" @change="handleChange">
          </a-select>
        <a-space size="large">
          <a-button type="secondary" :disabled="current <= 1" @click="onPrev">
            <IconLeft /> Back
          </a-button>
          <a-button type="primary" :disabled="current >= 3" @click="onNext">
            Next
            <IconRight />
          </a-button>
        </a-space>
      </div>
    </div>
  </transition>

  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted ,reactive} from "vue"

const allOptions = new Array(3).fill([
{
  label: 'bj',
  value: 'Beijing'
  },
])
const startAni = ref(false)
const current = ref(1)
const optionList = ref([])
const loading = ref(false)

onMounted(() => {
  startAni.value = true
  optionList.value = allOptions[0]
})

function startExam() {
  startAni.value = false
  if (!startAni) {

  }
}
function onPrev() {
  current.value = Math.max(1, current.value - 1)
  setCurrent()
}

function onNext() {
  current.value = Math.min(3, current.value + 1)
  setCurrent()
}

function handleChange(value:any){
  console.log(value);
}

function setCurrent() {
  optionList.value = allOptions[current.value -1] || []
  switch (current.value) {
    case 1:
      break;
      case 2:
      break;
      case 3:
      
      break;
    default:
      break;
  }
}

</script>

<style lang="scss" scoped>
.start_exam-enter-active {
  animation: fadeIn 0.7s;
}

.start_exam-leave-active {
  animation: fadeOutUp 0.5s;
}

.start {
  width: 100%;
  height: 100%;
  position: relative;
  .center{
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }
}
.steps{
  background-color:rgba($color: #000000, $alpha: 0.6);
  padding: 20px;
  text-align: center;
  margin-top: 10px;
  border-radius: 5px;
}
.button {
  display: inline-flex;
  height: 40px;
}

.box {
  width: 35px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  transition: all .8s;
  cursor: pointer;
  position: relative;
  background: rgb(58, 165, 253);
  overflow: hidden;
}

.box:before {
  content: "E";
  position: absolute;
  top: 0;
  background: #0f0f0f;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  transition: transform .4s;
}

.box:nth-child(2)::before {
  transform: translateY(-100%);
  content: 'X';
}

.box:nth-child(3)::before {
  content: 'C';
}

.box:nth-child(4)::before {
  transform: translateY(-100%);
  content: 'U';
}

.box:nth-child(5)::before {
  content: 'SE';
}

.button:hover .box:before {
  transform: translateY(0);
}
</style>
